<template>
  <div class="app-container">
    <div class="config-wrapper">
      <el-container style="height: 100%">
        <el-header class="config-header">
          <h3>应用参数配置</h3>
        </el-header>
        <el-container class="config-container">
          <el-tabs tab-position="left" style="height: 100%;width: 100%" type="border-card">
            <el-tab-pane v-for="(item,key) in applicationConfigList" :label="key" :lazy="true">
              {{ key }}
            </el-tab-pane>
          </el-tabs>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
import applicationConfig from "./applicationConfig";

export default {
  ...applicationConfig
}
</script>
<style lang="scss" scoped>
.config-wrapper {
  position: relative;
  background: #fff;
  height: calc(100vh - 100px);

  .config-header {
    height: 60px;
    border-bottom: 1px solid #EFEFEF;

    h3 {
      letter-spacing: 2px;
    }
  }

  .config-container {
    position: relative;
    width: 100%;
    height: calc(100% - 60px) !important;

    .config-aside {
      position: relative;
      width: 240px !important;
      height: 100% !important;
      padding: 10px 24px;
      border-right: 1px solid #EFEFEF;
    }

    .config-main {
      position: relative;
      width: calc(100% - 240px);
      height: 100% !important;
      padding: 10px 24px;
    }

  }
}
</style>
